<template>
  <!-- 编辑弹出框 -->
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="90%" top="5vh">
    <el-form ref="dataForm" :model="dataForm" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="ID"><el-input v-model="dataForm.id" disabled></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分类">
            <el-select v-model="dataForm.family_id" placeholder="选择分类">
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="价格"><el-input v-model="dataForm.price" /></el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品名"><el-input v-model="dataForm.name"></el-input></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品规格"><el-input v-model="dataForm.spec"></el-input></el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="商品标题"><el-input v-model="dataForm.title"></el-input></el-form-item>
      <el-form-item label="子标题"><el-input v-model="dataForm.subtitle"></el-input></el-form-item>
      <el-form-item label="商品承诺"><el-input v-model="dataForm.promise" type="textarea" :rows="2"></el-input></el-form-item>

      <el-row>
        <el-col :span="6">
          <el-form-item label="OS"><el-input v-model="dataForm.os"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="内存"><el-input v-model="dataForm.memory"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分辨率"><el-input v-model="dataForm.resolution"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="显卡"><el-input v-model="dataForm.video_card"></el-input></el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="CPU"><el-input v-model="dataForm.cpu"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="显示内存"><el-input v-model="dataForm.video_memory"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类别"><el-input v-model="dataForm.category"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="硬盘"><el-input v-model="dataForm.disk"></el-input></el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="上架时间">
            <!-- <el-input v-model="dataForm.shelf_time"></el-input> -->
            <el-date-picker v-model="dataForm.shelf_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" value-format="timestamp" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="销售数量"><el-input v-model="dataForm.sold_count" /></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否在售">
            <!-- <el-input v-model="dataForm.is_onsale"></el-input> -->
            <el-switch v-model="dataForm.is_onsale" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <el-form-item label="商品详情">
        <!-- 使用富文本组件 -->
        <editor :content.sync="dataForm.details" style="height: 500px;"></editor>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as ProductAPI from '@/api/product.js';
import Editor from '@/components/Tinymce/index.vue'; //导入封装后的富文本组件
export default {
  name: 'productEdit',
  components: {
    editor: Editor //注册富文本组件
  },
  props: {
    category_id: {
      type: Number,
      default: 0
    },
    categoryList: Array //分类选项数据
  },
  data() {
    return {
      dialogVisible: false,
      dataForm: {
        id: 0
      },
      //数据校验规则，后续继续完善
      rules: {}
    };
  },
  computed: {
    //弹框标题
    dialogTitle() {
      return !this.dataForm.id ? '新增' : '编辑';
    }
  },

  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields();
        if (id) {
          //是编辑
          ProductAPI.getDetailById(id).then(result => {
            this.dataForm = result.data; //看接口文档，知道data是对应的商品对象
            delete this.dataForm.picList; //删除多余字段；为什么？看API接口
            delete this.dataForm.family; //删除多余字段；为什么？看API接口
          });
        } else {
          //是新增
          this.setDataFormToDefault(); //Props传递的参数
        }
      });
    },

    // 确认提交
    handleSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          ProductAPI.updateProduct(this.dataForm)
            .then(() => {
              this.$message.success(`保存成功`);
              this.dialogVisible = false;
              this.$emit('refreshDataList'); //重新刷新列表数据
            })
            .catch(error => {});
        }
      });
    },

    setDataFormToDefault() {
      //初始默认值
      let defaultForm = {};
      defaultForm.id = 0;
      defaultForm.family_id = this.category_id; //Props传递的参数
      defaultForm.title = '';
      defaultForm.subtitle = '';
      defaultForm.price = 0;
      defaultForm.promise = '';
      defaultForm.spec = '';
      defaultForm.name = '';
      defaultForm.os = '';
      defaultForm.memory = '';
      defaultForm.resolution = '';
      defaultForm.video_card = '';
      defaultForm.cpu = '';
      defaultForm.video_memory = '';
      defaultForm.category = '';
      defaultForm.disk = '';
      defaultForm.details = '';
      defaultForm.shelf_time = Date.now();
      defaultForm.sold_count = 0;
      defaultForm.is_onsale = 0;

      this.dataForm = Object.assign({}, defaultForm);
    }
  }
};
</script>

<style scoped></style>
